import React from 'react';
import clsx from 'clsx';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';

import 'gitalk/dist/gitalk.css'

import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Styles from './index.module.css';
import indexImg from "@site/static/img/index.png";
import xiaoLogo from "@site/static/img/xiao.png"
// import 'antd/dist/antd.css';
import '../css/antd.css';

const backEndList = [
  { title: 'SQL', path: '', logo: '', logoText: 'Sql' },
]

const baseList = [
  { title: '数据结构与算法', path: 'docs/dataStructureAlgorithm/introduction', logo: '', logoText: '数据', content: true },
]

const otherList = [
  { title: '冥想', path: '', logo: xiaoLogo },
  { title: '瑜伽', path: '', logo: xiaoLogo },
  { title: '觉得不错的博客', path: 'docs/blogs/introduction', logo: xiaoLogo, content: true },
]
const isImgText = (item) => {
  if (item.logo.length > 0) {
    return <img src={item.logo}></img>;
  } else {
    return <div className={Styles.logoText}>{item.logoText}</div>
  }
}

export default function Home() {
  const { siteConfig } = useDocusaurusContext();
  return (<Layout><main>
    <header className={Styles.header} style={{backgroundColor:'#efefef'}}>
      <img src={indexImg} style={{ width: '100%' }}></img>
    </header>
    <nav className={Styles.nav}  style={{background:'white'}}>
      <section className={Styles.navsection}>
        <h4 className={Styles.navtitle}>后端相关</h4>
        <ul className={Styles.nav_ul}>
          {backEndList.map(item => {
            return (<li key={item.title} className={item.content ? '' : Styles.mask}><Link to={item.path} className={Styles.nav_link}>
              {isImgText(item)}
              <div className={Styles.nav_link_box}>
                {item.title}
              </div>
            </Link></li>)
          })}
        </ul>
      </section>
      <section className={Styles.navsection}>
        <h4 className={Styles.navtitle}>计算机基础</h4>
        <ul className={Styles.nav_ul}>
          {baseList.map(item => {
            return (<li key={item.title} className={item.content ? '' : Styles.mask}><Link to={item.path} className={Styles.nav_link}>
              {isImgText(item)}
              <div className={Styles.nav_link_box}>
                {item.title}
              </div>
            </Link></li>)
          })}
        </ul>
      </section>
      <section className={Styles.navsection}>
        <h4 className={Styles.navtitle}>不知道咋分类，就放下面吧</h4>
        <ul className={Styles.nav_ul}>
          {otherList.map(item => {
            return (<li key={item.title} className={item.content ? '' : Styles.mask}><Link to={item.path} className={Styles.nav_link}>
              {isImgText(item)}
              <div className={Styles.nav_link_box}>
                {item.title}
              </div>
            </Link></li>)
          })}

        </ul>
      </section>
    </nav>
  </main></Layout>);
}
